{% extends 'admin/dashboard.html' %}

{% block content %}
<div class="card">
    <h2 class="text-xl font-bold mb-4">产品列表</h2>
    <a href="{{ url_for('admin_products_add') }}" class="inline-block mb-4 px-4 py-2 bg-primary text-white rounded">添加产品</a>
    <table class="min-w-full divide-y divide-gray-200">
        <thead class="bg-gray-50">
            <tr>
                <th scope="col" class="table-header">名称</th>
                <th scope="col" class="table-header">描述</th>
                <th scope="col" class="table-header">图片</th>
                <th scope="col" class="table-header">操作</th>
            </tr>
        </thead>
        <tbody class="bg-white divide-y divide-gray-200">
            {% for product in products %}
            <tr>
                <td class="table-data">{{ product.name }}</td>
                <td class="table-data">{{ product.description[:50] }}...</td>
                <td class="table-data">
                    {% if product.image_url %}
                    <img src="{{ product.image_url }}" alt="{{ product.name }}" class="w-16 h-16 object-cover">
                    {% endif %}
                </td>
                <td class="table-data">
                    <a href="javascript:editProduct({{ product.id }})">修改</a>
                    <a href="javascript:deleteProduct({{ product.id }})">删除</a>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
<script>
function editProduct(id) {
    window.location.href = `/api/products/${id}?edit=true`;
}
function deleteProduct(id) {
    if (confirm('确定要删除该产品吗？')) {
        fetch(`/api/products/${id}`, { method: 'DELETE' })
            .then(response => response.json())
            .then(data => {
                if (data.status === 'success') {
                    location.reload();
                }
            });
    }
}
</script>
{% endblock %}